<template>
  <div ref="pdom" class="cam-box" v-show="_showed" onmousedown="javascript:hMouseDown(event);">
    <div class="head">
      <label style="letter-spacing: 2px">{{ showName || '... ...' }}</label>
      <!-- <a href="javascript:;" class=" " style="pointer-events: all;" @click="hProject">{{isProj?"关闭":"查看"}}投影</a> -->
      <div class="btn bclose" @click="hClose">Ｘ</div>
    </div>

    <div class="body">
      <div :class="{ rcx: hasRcx }">
        <video
          id="videoDomMat"
          ref="domVideo"
          class="player"
          controls="controls"
          v-show="!isProj"
        ></video>
        <video ref="domRCX" class="player" controls="controls" v-show="hasRcx"></video>
      </div>
      <div class="ctrl">
        <div class="ybg" v-if="cCtrl.dat">
          <div
            :class="cCtrl.dat[4].cls"
            @mousedown="cCtrl.dat[4].hB(icode)"
            @mouseup="cCtrl.dat[4].hE(icode)"
          >
            <!-- {{cCtrl.dat[4].name}} -->
          </div>
          <div
            :class="cCtrl.dat[2].cls"
            @mousedown="cCtrl.dat[2].hB(icode)"
            @mouseup="cCtrl.dat[2].hE(icode)"
          >
            <!-- {{cCtrl.dat[2].name}} -->
          </div>
          <div
            :class="cCtrl.dat[3].cls"
            @mousedown="cCtrl.dat[3].hB(icode)"
            @mouseup="cCtrl.dat[3].hE(icode)"
          >
            <!-- {{cCtrl.dat[3].name}} -->
          </div>
          <div
            :class="cCtrl.dat[5].cls"
            @mousedown="cCtrl.dat[5].hB(icode)"
            @mouseup="cCtrl.dat[5].hE(icode)"
          >
            <!-- {{cCtrl.dat[5].name}} -->
          </div>
          <!-- v-for="btn in cCtrl?.dat" @mousedown="btn.hB(icode)" @mouseup="btn.hE(icode)"
					{{btn.name}} -->
        </div>
        <div class="zoom">
          <div
            :class="cCtrl.dat[0].cls"
            @mousedown="cCtrl.dat[0].hB(icode)"
            @mouseup="cCtrl.dat[0].hE(icode)"
          >
            {{ cCtrl.dat[0].name }}
          </div>
          <div
            :class="cCtrl.dat[1].cls"
            @mousedown="cCtrl.dat[1].hB(icode)"
            @mouseup="cCtrl.dat[1].hE(icode)"
          >
            {{ cCtrl.dat[1].name }}
          </div>
        </div>

        <div class="vb btn b" @click="hOpenAudio">广播</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, nextTick, computed, reactive, watch, ref, toRefs } from 'vue'
import { useStore } from 'vuex'

import { ElMessage } from 'element-plus'

import { Play } from './m3u8Play.js'

import { eCtrlType, CtrlCam } from './ctrl.js'

const store = useStore()

const { datCam, openProj, datCamAreas, camName } = toRefs(store.state)

function hMap() {
  return window.__map
}
const _showed = ref(false)
const icode = ref('')
const domv = ref('')
const showName = ref('')
let gArea = null

watch(camName, (n) => {
  if (gArea) {
    gArea.remove()
  }
  console.log('mapclick', n)
  if (!n) {
    //_showed.value = false;
    return
  }
  pdom.value.style.transform = 'translate(0px,0px)'
  hShowArea(n)

  showName.value = n
  if (store.state.page_curr == 'set') {
    return
  }
  _showed.value = true
  console.log('准备预览', n)
  store.dispatch('asyncOpenCam', n)
})
//监控范围
const hShowArea = (v) => {
  let n = v || showName.value

  if (gArea) {
    gArea.remove()
  }
  let datArea = datCamAreas.value.find((t) => t.Other == n)
  if (datArea) {
    let geojson = JSON.parse(datArea.Json)
    geojson.properties.datId = datArea.ID
    gArea = hMap().hAddObject(geojson)
  } else {
    console.log('无区域数据', n, datArea)
  }
}

const bpath = '/GetHIKCam.ashx?title=GetCamPrev&protocol=hlss&streamType=1&code='

const domVideo = ref(),
  domRCX = ref()

let cPlay = null,
  cPlayRcx = null //播放器
const cCtrl = new CtrlCam() //云台控制器

//23.7.4 整合版
// hMap().hApi("hServerCamPlay", [code], (rs) => {
// 		let url = rs[0].workers[0].hlsUrl;
// 		console.log("监控播放", url, rs);
// 		cPlay.hPlay(url);
// 		isPlay.value = true;
// 		busy = false;
// 	});

const hasRcx = ref(false)
watch(datCam, (cam) => {
  if (cam == null) {
    return
  }
  if (!cPlay) {
    cCtrl.hSetApi(store.state.apiCam)
    cPlay = new Play({
      videoDom: domVideo.value
    })
    cPlay.onStop = () => {
      store.state.datCam = null
    }

    cPlayRcx = new Play({
      videoDom: domRCX.value
    })
  }
  hShow()
  hasRcx.value = cam.code2 ? true : false
  let code = cam.cameraIndexCode
  icode.value = code
  let path = `${bpath}${code}`
  //console.log("",path);
  store.state.apiCam.hGet(path, '', (d) => {
    let url = d.data?.url
    console.log('地址获取 返回', d.data, path)
    if (url) {
      cPlay.hPlay(url)
    } else {
    }
  })

  //热成像，红外
  if (cam.code2) {
    path = `${bpath}${cam.code2}`
    //console.log("",path);
    store.state.apiCam.hGet(path, '', (d) => {
      let url = d.data?.url
      console.log('地址获取 红外', d.data, path)
      if (url) {
        cPlayRcx.hPlay(url)
      } else {
      }
    })
  }
})
//投影开启
watch(openProj, (isproj) => {
  if (isproj) {
    _showed.value = false
  } else {
    cPlay?.hStop()
    cPlayRcx?.hStop()
  }
})
watch(_showed, (s) => {
  isProj.value = false
  if (gArea && !s && !openProj.value) {
    gArea.remove()
  }
})

//查看投影
let gProj = null
const isProj = ref(false)
const hProject = () => {
  let n = showName.value // camName.value;
  if (gArea) {
    gArea.remove()
  }
  if (gProj) {
    gProj.remove()
  }
  if (isProj.value) {
    isProj.value = false
    hShowArea(n)
    return
  }
  let datArea = datCamAreas.value.find((t) => t.Other == n)
  isProj.value = datArea ? true : false
  if (datArea) {
    let geojson = JSON.parse(datArea.Json)
    let parr = geojson.geometry.coordinates

    console.log('投影区域数据', parr)
    let v = domVideo.value
    gProj = hMap().hSetProjection(parr, v)
  } else {
    console.log('无区域数据', n, datArea)
  }
}
watch(isProj, (v) => {
  if (!v) {
    gProj.remove()
  }
})

const hClose = () => {
  store.state.openProj = false
  _showed.value = false
  store.state.camName = ''
  cPlay?.hStop()
  cPlayRcx?.hStop()
}

const pdom = ref()
const hShow = () => {
  _showed.value = true
  pdom.value.style.transform = 'translate(0,50px)'
}

const hOpenAudio = () => {
  store.state.datBroadName = camName.value
  store.state.showAudio = true
  console.log('打开广播', camName)
  //store.commit("hSetAudio", camName);
}

//事件抛出
//外层绑定@onFn="hOnFn"
const emit = defineEmits(['onFn', 'onUnSave'])
//触发
const hOnFn = (t) => {
  emit('onFn', t)
}

const hFn = () => {}
//属性导出
//使用方法 ref="rdom" rdom.value.hFn()
defineExpose({
  hFn
})

//属性定义
//数据绑定v-bind:dat="dat"
//const dat=ref({});
const props = defineProps({
  dat: {
    type: Object
  } //概况
})
</script>

<style scoped lang="scss">
.cam-box {
  position: absolute;
  height: 300px;
  z-index: 2;
  top: 280px;
  right: 460px;
  color: #eee;
  font-size: 20px;
  background-color: rgb(30 58 88 / 73%);
  border-radius: 10px;
  border: 2px solid #2a67c29a;

  .head {
    height: 30px;
    line-height: 26px;
    pointer-events: none;

    a {
      font-size: 13px;
      margin: 0 12px;
    }

    .bclose {
      pointer-events: all;
      float: right;
      line-height: 16px;
      margin: 6px 12px 0;
      height: 30px;
      width: 26px;
      color: #eee;
      background: rgba(30, 58, 88, 0.83);
      transform: scaleY(0.8);
      display: flex;
      justify-content: center;
      font-size: 20px;
      font-family: '';
      border: 1px solid #7e8795;
    }

    .bclose:hover {
      color: red;
    }
  }

  .body {
    width: 100%;
    height: calc(100% - 50px);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 12px;
    margin: 0 auto;
  }

  .ctrl {
    width: 180px;
    height: 100%;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #03345faa;
    border-radius: 10px;
    padding: 8px;
    margin-left: 8px;

    > div {
      // background-color: #aa5500;
      margin: 3px;
      padding: 3px 6px;
    }

    .ybg {
      width: 126px;
      height: 126px;
      background-image: url(/imgs/hkvideo/dir-bg.png);
      background-size: 100% 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: space-around;
      transform: rotate(315deg);
    }

    .vb {
      background-size: calc(100% - 2px) calc(100% - 2px);
      background-position: center;
      background-repeat: no-repeat;
    }

    .vb:hover {
      box-shadow: 1px 1px 3px black;
    }

    .ybg .vb:hover {
      box-shadow: unset;
      filter: drop-shadow(1px 2px 3px black);
    }

    .zoom {
      display: flex;
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding: 0;
      margin: 0;
      color: #58d2ff;
    }

    .v-dir {
      background-image: url(/imgs/hkvideo/dir.png);
      width: 20px;
      height: 28px;
      margin: 10%;
      cursor: pointer;
    }

    .v-up {
      transform: rotate(132deg);
    }

    .v-down {
      transform: rotate(315deg);
    }

    .v-left {
      transform: rotate(45deg);
    }

    .v-right {
      transform: rotate(227deg);
    }

    .v-in,
    .v-out {
      width: 50%;
      text-align: right;
      height: 100%;
      padding-right: 10px;
      background-size: auto;
      background-position: left;
      background-position-x: 10px;
      background-color: #5981bd5a;
      border-radius: 10px;
      margin: 0 2px;
    }

    .v-in {
      background-image: url(/imgs/hkvideo/s-.png);
    }

    .v-out {
      background-image: url(/imgs/hkvideo/s.png);
    }
  }

  .rcx {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .player {
    width: 350px;
    height: 100%;
    margin: 0;
    object-fit: fill;
    background-color: #222;
    border: 2px solid #226ad59a;
    margin: 0 1px;
  }

  .btn.b {
    font-size: 18px;
    width: 100%;
    height: 42px;
    line-height: 36px;
    right: 10px;
    bottom: 6px;
    border-radius: 10px;

    background: #5981bd5a;
    // url(/imgs/hkvideo/bobg.png);
    background-size: calc(100% + 2px) calc(100% + 2px);
    background-position: center;
    letter-spacing: 6px;
    color: #98e8fb;
    font-weight: bold;
  }

  .btn.b:hover {
    color: #04ff00;
  }

  label {
    font-size: 14px;
    letter-spacing: 2px;
  }
}
</style>
